<template>
    <div id="apply">
        <van-nav-bar title="" left-arrow fixed safe-area-inset-top @click-left="onClickLeft"></van-nav-bar>
        
        <div class="content">
            <div class="nav-txt">
				<div>
					<span v-if="info.status == 1">待接单</span>
					<span v-if="info.status == 2">待发货</span>
					<span v-if="info.status == 3">配送中</span>
					<span v-if="info.status == 4">已完成</span>
				</div>
				<div v-if="(info.status == 1 || info.status == 2) && info.delivery_type == 1">
					<div class="nav-des"> 
						<span class="des-time">{{ info.end_time }}</span>
						<span>&nbsp;送达</span>
					</div>
				</div>
				<div v-if="info.status == 2 && info.delivery_type == 2">
					<div class="nav-des">商品还未发出，请及时发货！</div>
				</div>
                <div v-if="info.status == 3 && info.delivery_type == 1" class="nav-des">
					<div v-if="info.delivery_time " class="nav-des"> 
						<span class="des-time">{{ info.delivery_time }}</span>
						<span>&nbsp;送达</span>
					</div>
                    <div v-else>商品还未发出，请及时发货！</div>
                </div>
                <div v-if="info.status == 4" class="nav-des">
                    <div>订单已完成配送</div>
                </div>
			</div>
			<div v-if="(info.status == 3 || info.status == 4) && info.delivery_type == 2">
				<div v-if="info.delivery_num" class="nav-des nav-code" @click="copy(info.delivery_num)">
					<span>快递单号&nbsp;</span>
					<span class="des-time">{{ info.delivery_num }}</span>
					<img class="des-img" src="https://files.onestep6.com/cloud/order-copy.png" alt="">
				</div>
			</div>

            <div class="address">
				<div class="address-title">
                    <div class="title-flex">
                        <img class="title-img" src="https://files.onestep6.com/cloud/order-icon.png"  />
                        <div class="title-txt">{{ info.user_shop_name }}</div>
                    </div>
                </div>
                <div class="content-info">
                    <div class="info-flex" @click.stop="copy(info.address)">
                        <span class="info-name">店铺地址</span>
                        <span class="info-address">{{ info.address }}</span>
                        <img class="info-icon" src="https://files.onestep6.com/cloud/order-copy.png"  />
                    </div>
                    <div class="info-flex">
                        <span class="info-name">联系人名</span>
                        <span class="info-address">{{ info.contact_user }}</span>
                    </div>
                    <div class="info-flex">
                        <span class="info-name">联系电话</span>
						<a class="info-a" :href="`tel:+86${info.contact_phone}`" @click.stop="()=>{}">
							<span class="info-address">{{ info.contact_phone }}</span>
							<div class="info-iconBg">
								<img class="info-phone" src="https://files.onestep6.com/cloud/delivery-phone.png"  />
							</div>
						</a>
                    </div>
                </div>
			</div>

            <div class="delivery" >
				<div class="delivery-title">
					<div>配送商品</div>
					<div class="title-right">
                        <span>采购金额&nbsp;</span>
                        <span class="right-price">¥{{ info.base_price }}</span>
                    </div>
				</div>
				<div v-for="(itemC,indexC) in good_list" :key="indexC" @click="onDetail(itemC)">
					<van-swipe-cell>
						<div class="delivery-item" >
							<img class="item-img" :src="itemC.good_pics"  />
							<div class="item-right">
								<div class="item-flex">
									<div class="item-des">{{ itemC.good_name }}</div>
									<div class="item-price">
										<span class="price-icon">¥</span>
										<span>{{ itemC.base_price_arr.z_price }}</span>
										<span class="price-small">.{{ itemC.base_price_arr.x_price }}</span>
									</div>
								</div>
								<div class="item-circle">{{ itemC.good_unit }}</div>
								<div class="item-txt">数量：<span class="txt-num">x{{ itemC.good_num }}</span></div>
								<div class="item-txt txt-nomar">单价：<span class="txt-icon">¥</span>{{ itemC.base_price_arr.z_price }}<span class="txt-small">.{{ itemC.base_price_arr.x_price }}</span></div>
							</div>
						</div>
						<template #right>
							<van-button square text="修改数量" type="danger" class="delete-button" @click="onShowNum(itemC)" />
						</template>
					</van-swipe-cell>
				</div>
			</div>

            <div class="info">
				<div class="info-title">订单信息</div>
				<div class="info-flex" v-if="info.order_num">
					<div class="info-name">订单编号</div>
					<div class="info-price" @click="copy(info.order_num)">{{ info.order_num }}</div>
                    <img class="info-img" @click="copy(info.order_num)" src="https://files.onestep6.com/cloud/order-copy.png" alt="">
				</div>
				<div class="info-flex">
					<div class="info-name">下单时间</div>
					<div class="info-price">{{ info.created }}</div>
				</div>
			</div>
			<div v-if="is_admin == 1" class="info-tip">
				<span class="tip-icon">*</span>
				<span>订单没有确认收货时，可发起退款</span>
			</div>
        </div>

        <div class="price" v-if="((info.status == 1 || info.status == 2 || is_admin == 1) && info.status != 4) || has_refund == 1">
			<!-- <div class="price-right">
				<van-button class="refund-btn">分享订单</van-button>
			</div> -->
			<div v-if="has_refund" class="price-right" @click="onRefundDetail">
				<van-button class="refund-btn">退款详情</van-button>
			</div>
			<div v-if="info.status == 1" class="price-right" @click="getOrder">
				<van-button class="price-btn">立即接单</van-button>
			</div>
			<div v-if="info.status == 2" class="price-right" @click="onShipment">
				<van-button class="price-btn">确认发货</van-button>
			</div>
            <div v-if="is_admin == 1 && info.status != 1 && info.status != 4" class="price-right">
				<van-button class="price-btn" @click="onRefund">发起退款</van-button>
			</div>
		</div>

		<popup-logistics ref="popupLogistics" @right="onCode" />
		
		<popup-number ref="popupNumber" @right="onNumber" />
    </div>
</template>
<script>
import { copyText } from "@/utils/index";
import { orderInfo, doOrder, endOrder, changeGoodNum } from "@/api/cloud";
import popupLogistics from '@/components/popupLogistics.vue';
import popupNumber from '@/components/popupNumber.vue';
export default {
	components: {
		popupLogistics,
		popupNumber
	},
    data() {
        return {
			order_id: '',
            info: {
                status: 2,
                time_txt: '',
            },
            good_list: [],
			is_admin: 0,
			has_refund: 0,
			setData: {
				id: '',
				good_id: '',
				good_num: ''
			}
        }
    },
    mounted() {
		console.log(this.$route.query.id)
		this.order_id = this.$route.query.id;
		this.orderInfo()
		this.is_admin = localStorage.getItem('is_admin')
    },
    methods: {
		async orderInfo() {
			const res = await orderInfo({
				id: this.order_id
			})
			if (res.status == 1) {
				this.info = res.data.info;
				this.good_list = res.data.good_list;
				this.has_refund = res.data.has_refund;
			}
		},
        onClickLeft() {
            this.$router.back();
        },
        copy(num) {
            copyText(num);
        },
        onRefund() {
			let arr = [];
			this.good_list.forEach((item) => {
				arr.push([item.id, item.good_num])
			})
			console.log(arr)
            this.$router.push({
				path: '/refund', 
				query: {
					id: this.info.id
				}
			})
        },
		onRefundDetail() {
			this.$router.push({
				path: '/refundDetail',
				query: {
					id: this.info.id
				}
			})
		},
		async getOrder() {
			const res = await doOrder({
				id: this.info.id
			})
			if(res.status == 1) {
				this.$toast.success('接单成功');
				this.orderInfo();
			}
		},
		onShipment() {
			this.$refs.popupLogistics.show();
		},
		onShowNum(item) {
			console.log(item)
			this.setData.id = this.order_id;
			this.setData.good_id = item.good_id;
			this.$refs.popupNumber.show();
		},
		async onCode(data) {
			console.log(data);// logistics_code
			const res = await endOrder({
				id: this.info.id,
				delivery_num: data.logistics_code
			})
			if (res.status == 1) {
				this.$set(this.info, 'status', 3);
				this.$toast.success('单号填写成功');
			}
		},
		async onNumber(data) {
			console.log(data)
			this.setData.good_num = data.good_num;
			console.log(this.setData)
			const res = await changeGoodNum(this.setData);
			if (res.status == 1) {
				this.orderInfo()
			}
		},
		onDetail(item) {
			this.$router.push({
				path: '/goodDetail',
				query: {
					id: item.good_id
				}
			})
		}
    },
}
</script>
<style lang="less" scoped>
#apply {
  width: 100vw;
  min-height: 100vh;
  padding-top: calc(92px);
  padding-bottom: 198px;
  background: #FAFAFA;
    ::v-deep .van-nav-bar .van-icon {
        color: #323233;
    }
    ::v-deep .van-nav-bar{
        background: #FAFAFA;
    }
    ::v-deep .van-hairline--bottom::after {
        border: none;
    }
}

.nav-txt{
    display: flex;
    align-items: center;
    height: 90px;
    font-size: 36px;
    line-height: 88px;
    color: #141414;
    font-weight: bold;
    padding-left: 32px;
    .txt-icon{
        margin-right: 8px;
    }
}
.nav-des{
	display: flex;
	align-items: center;
	padding-top: 4px;
	margin-left: 8px;
	font-size: 28px;
	line-height: 40px;
	font-weight: 400;
	color: #141414;
	.des-time{
		display: inline-block;
		min-width: 74px;
		color: #49CA6F;
		text-align: center;
	}
	.des-img{
		flex-shrink: 0;
		display: block;
		width: 32px;
		height: 32px;
		margin-left: 20px;
	}
}
.nav-code{
	margin-left: 0px;
	padding-left: 32px;
	margin-bottom: 20px;
}

.address{
    width: 702px;
	padding: 32px 34px 10px;
	background-color: #FFFFFF;
	background-img: url('https://files.onestep6.com/cloud/fill-line.png');
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 702px 3px;
	border-radius: 16px;
    margin: 0 auto 24px;
    .address-title{
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        .title-flex {
            display: flex;
            align-items: center;
        }
        .title-img {
            flex-shrink: 0;
            display: block;
            width: 36px;
            height: 36px;
            margin-right: 8px;
        }
        .title-txt {
            font-size: 32px;
            line-height: 36px;
            color: #141414;
            font-weight: bold;
        }
    }
}

 .content-info{
    width: 646px;
    margin: 0 auto;
    .info-flex{
      display: flex;
      align-items: center;
      margin-bottom: 16px;
		.info-a{
			display: flex;
			align-items: center;
		}
      .info-name{
        font-size: 24px;
        line-height: 24px;
        font-weight: bold;
        color: #202630;
        margin-right: 14px;
      }
      .info-address{
        font-size: 24px;
        line-height: 24px;
        font-weight: 400;
        color: #474D57;
      }
      .info-icon{
        display: block;
        width: 24px;
        height: 24px;
        margin-left: 22px;
      }
      .info-iconBg{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background: #F5F5F6;
        border-radius: 8px;
        margin-left: 28px;
      }
      .info-phone{
        display: block;
        width: 24px;
        height: 24px;
      }

    }
  }

.delivery{
    width: 702px;
    padding-bottom: 36px;
	background: #FFFFFF;
	border-radius: 16px;
    margin: 0 auto 24px;
	.delivery-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 646px;
		height: 98px;
		font-size: 32px;
		line-height: 32px;
		font-weight: bold;
		color: #141414;
		border-bottom: 2px solid #F5F5F6;
		margin:0 auto 24px;
        .title-right{
            font-size: 24px;
            line-height: 32px;
            color: #798391;
            font-weight: 400;
            .right-price{
                font-size: 32px;
                line-height: 32px;
                color: #49CA6F;
                font-weight: bold;
            }
        }
	}
	.title-txt{
		font-size: 24px;
		line-height: 24px;
		color: #798391;
		font-weight: 400;
	}
	.delivery-item{
		display: flex;
		padding-left: 26px;
		padding-right: 22px;
		margin-bottom: 16px;
		// border-bottom: 2px solid #F5F5F6;
		.item-img{
			flex-shrink: 0;
			display: block;
			width: 220px;
			height: 220px;
			border-radius: 8px;
			margin-right: 24px;
		}
		.item-right{
			flex: 1;
			flex-shrink: 0;
			border-bottom: 2px solid #F5F5F6;
		}
		.item-flex{
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}
		.item-des{
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			flex-shrink: 0;
			width: 282px;
			font-size: 28px;
			line-height: 40px;
			color: #333333;
			font-weight: 400;
		}
		.item-price{
			font-size: 40px;
			line-height: 40px;
			color: #141414;
			font-weight: bold;
			.price-icon{
				font-size: 24px;
			}
			.price-small{
				font-size: 28px;
			}
		}
		.item-circle{
			width: fit-content;
			padding: 0px 6px;
			margin-right: 6px;
			margin-bottom: 14px;
			font-size: 20px;
            line-height: 24px;
			color: #FFFFFF;
			background: #49CA6F;
			border-radius: 4px;
		}
		.item-txt{
			font-size: 24px;
			line-height: 34px;
			font-weight: 400;
			color: #798391;
			margin-bottom: 14px;
		}
		.txt-icon{
			font-size: 20px;
		}
		.txt-small{
			font-size: 20px;
		}
		.txt-num{
			color: #FF4D4F;
		}
		.txt-nomar{
			margin-bottom: 0;
		}
	}
	::v-deep .van-swipe-cell__right{
		right: -1px;
	}
	.delete-button{
		height: 100%;
		:v-deep .van-button{
			height: 100%;
		}
	}
	.delivery-more{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		line-height: 40px;
		font-weight: 400;
		color: #798391;
		padding-top: 20px;
		padding-bottom: 12px;
		.more-img{
			display: block;
			width: 32px;
			height: 32px;
		}
		.more-back{
			transform: rotate(180deg);
		}
	}
}

.info{
	width: 702px;
	padding: 32px 32px 6px;
	background: #FFFFFF;
	border-radius: 16px;
    margin: 0 auto;
	.info-title{
		font-size: 32px;
		line-height: 32px;
		color: #141414;
		font-weight: bold;
		margin-bottom: 48px;
	}
	.info-flex{
		display: flex;
		align-items: center;
		margin-bottom: 40px;
	}
	.info-name{
		font-size: 28px;
		line-height: 28px;
		font-weight: 400;
		color: #141414;
        margin-right: 36px;
	}
	.info-price{
		font-size: 28px;
		line-height: 28px;
		color: #798391;
		font-weight: 400;
		.price-icon{
			font-size: 24px;
			margin-right: 2px;
		}
	}
    .info-img{
        flex-shrink: 0;
        display: block;
        width: 32px;
        height: 32px;
        margin-left: 20px;
    }
	.info-type{
		display: flex;
		align-items: center;
		font-size: 28px;
		line-height: 28px;
		color: #798391;
		font-weight: 400;
		.type-img{
			display: block;
			width: 28px;
			height: 28px;
			margin-right: 16px;
		}
	}
}
.info-tip{
	padding-top: 20px;
	padding-left: 20px;
	font-size: 24px;
	line-height: 30px;
	font-weight: bold;
	color: #798391;
	.tip-icon{
		color: #FF4D4F;
	}
}

.price{
	position: fixed;
    left: 0;
    bottom: 0;
	display: flex;
	justify-content: flex-end;
    width: 100vw;
    padding-top: 19px;
	padding-left: 56px;
	padding-right: 28px;
    padding-bottom: calc(20px + constant(safe-area-inset-bottom)); /* 兼容 iOS<11.2 */
    padding-bottom: calc(20px + env(safe-area-inset-bottom)); /* 兼容iOS>= 11.2 */
    background: #FFFFFF;
	.price-right{
		display: flex;
		align-items: center;
		.price-btn{
			flex-shrink: 0;
			display: block;
			width: 216px;
			height: 72px;
			background: #49CA6F;
			border-radius: 39px;
			font-size: 32px;
			line-height: 72px;
			color: #FFFFFF;
			font-weight: 500;
			border:none;
			margin-left: 14px;
		}
		.price-btn::after{
			border:none;
		}
		.refund-btn{
			width: 216px;
			height: 72px;
			border: 2px solid #49CA6F;
			font-size: 32px;
			line-height: 68px;
			color: #49CA6F;
			font-weight: 500;
			border-radius: 39px;
			background: #FFFFFF;
		}
	}
}
</style>